<template>
<div >
    <div class="content page-trade"  style="padding-bottom:2.5rem;overflow-x: hidden;">
        <div class="trade-box">
            <div class="depths">
                <div class="priceCol">
                    <div class="lastPrice magenta">
                        <span v-on:click=change_price(last_price)>最新 {{ last_price }}</span>
                    </div>
                    <div class="fontKline">
                        <a href="/m/trade.html#/market"><i class="font font-kxian"></i></a>
                    </div>
                </div>
                <table class="buyin" border="0" cellspacing="0" cellpadding="0">
                    <colgroup style="width: 50%"></colgroup>
                    <colgroup style="width: 50%"></colgroup>
                    <tbody>
                        <tr>
                            <th class="f-left">价格</th>
                            <th class="f-right">数量</th>
                        </tr>
                        <tr v-for="info in depth_sell" v-on:click=change_price(info.price)>
                            <td class="f-left magenta">
                                <span class="gray">{{info.price}}</span>
                            </td>
                            <td class="f-right">
                                <span>{{info.count}}</span>
                                <div class="zhuzhuang" :style="info.bg_length"></div>
                            </td>
                        </tr>
                    </tbody>
                </table>

                <table class="buyout" >
                    <colgroup style="width: 50%"></colgroup>
                    <colgroup style="width: 50%"></colgroup>
                    <tbody>
                        <tr v-for="info in depth_buy" v-on:click=change_price(info.price)>
                            <td class="f-left green">
                                <span class="gray">{{info.price}}</span>
                            </td>
                            <td class="f-right">
                                <span>{{info.count}}</span>
                                <div class="zhuzhuang" :style="info.bg_length"></div>
                            </td>
                        </tr>
                    </tbody>
                </table>

                <div class="group">
                    <label>深度合并</label>
                    <span disabled>1</span>
                    <span disabled>2</span>
                    <span disabled class="orange">3</span>
                </div>
            </div>

            <div class="trade-forms">
                <div class="order-form">
                    <div class="f-left products">
                        <div class="select">
                            <label v-on:click="link_to_market()">
                                <i class="icon icon-left" style="font-size: 0.6rem;color: #F0B90B;font-weight:bold;"></i>
                                <span>{{up_coin_type}} / {{up_use_coin_type}}</span>
                            </label>
                        </div>

                    </div>
                    <div class="order-form-tab">
                        <p class="buttons-row">
                        <span id="title_buy" class="button cur" v-on:click=click_buy()>买入</span>
                        <span  id="title_sell" class="button" v-on:click=click_sell()>卖出</span>
                        </p>
                    </div>
                    <div class="order-form-con">
                        <div class="buy-form">
                            <form>
                                <div class="filed f-clear">
                                    <div class="totals">
                                        <div>
                                            <label class="">可用: </label>
                                            <span>{{show_balance}}  {{show_coin_type}} </span>
                                        </div>
                                    </div>
                                </div>
                                <div class="filed input-group">
                                    <input v-model="input_price" placeholder="价格" type="text" keypress=""/>
                                    <span class="input-u">{{up_use_coin_type}}</span>
                                </div>
                                <div class="filed input-group">
                                    <input v-model="input_count" placeholder="数量" type="text" keypress=""/>
                                    <span class="input-u">{{up_coin_type}}</span>
                                </div>
                                <div class="filed f-clear">
                                    <div class="totals">
                                        <label>{{show_can_total_title}}:</label>
                                        <span class="f-fr">{{show_can_total_amount}} {{show_can_total_coin_type}}</span>
                                    </div>
                                </div>
                                <div class="filed totalsPercent">
                                    <span v-on:click=change_count(0.25) :class="percent_color" >25%</span>
                                    <span v-on:click=change_count(0.50) :class="percent_color2" >50%</span>
                                    <span v-on:click=change_count(0.75) :class="percent_color3" >75%</span>
                                    <span v-on:click=change_count(1) :class="percent_color4" >100%</span>
                                </div>
                                <div class="filed f-clear">
                                    <label>金额: </label>
                                    <span class="f-fr">{{total_amount}} {{up_use_coin_type}}</span>
                                </div>
                                <div class="filed">
                                    <input type="button" id="id_button" v-on:click="submit_button()"  :value="show_button_title" class="button button-big submit-btn buy-btn">
                                </div>
                            </form>
                        </div>

                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</template>

<script>

var trade_data = {

    type1 : "buy",
    show_button_title : "买入",

    last_price : 0.00,
    depth_sell : [],
    depth_buy : [],

    up_coin_type : '',
    up_use_coin_type : '',

    coin_type : '',
    use_coin_type : '',

    show_balance : "",      // 可用余额
    show_coin_type : "",    // 可用余额后面类型

    show_can_total_amount : "",      // 可买或者可卖总额
    show_can_total_title : "",       // 可买或者可卖
    show_can_total_coin_type : "",   // 可


    input_price : "",
    input_count : "",

    percent_color : '',
    percent_color2 : '',
    percent_color3 : '',
    percent_color4 : '',
}
// trade template

export default {
    name: 'TRADE',
    data: function () {
        // 初始化
        trade_data.coin_type=""
        trade_data.use_coin_type=""
        trade_data.up_coin_type=""
        trade_data.up_use_coin_type=""

        return trade_data
    },
    computed: {
        total_amount : {
            get: function () {
                return this.input_price * this.input_count
            },
            set: function (data) {
                return total_amount = data
            },
        }
    },

    created:function () {

        this.coin_type = this.$route.params.coin_type
        this.use_coin_type = this.$route.params.use_coin_type
        if (!this.coin_type) {
            this.coin_type = 'btc'
            this.use_coin_type = 'bitcny'
        }
        this.up_coin_type=this.coin_type.toUpperCase()
        this.up_use_coin_type=this.use_coin_type.toUpperCase()

        this.get_all_order_type(this.coin_type, this.use_coin_type, 'sell')
        this.get_all_order_type(this.coin_type, this.use_coin_type, 'buy')
        this.get_curr_market()
        this.init_left('buy', this.use_coin_type)
    },

    methods:{
        get_curr_market: function () {
            var this_ = this
            $.post('/btc/get_curr_market',{
                coin_type : this_.coin_type,
                use_coin_type : this_.use_coin_type,
            }, (data) => {
                //console.log(data)
                var tofixed = coin_tofixed(this.coin_type, this.use_coin_type, coin_tofixed_type_price)
                var curr = floor_number(data[0].curr, tofixed)
                this.last_price = curr
            })
        },
        link_to_market: function () {
            window.location.href = './market';
        },
        click_sell: function () {
            this.init_left('sell', this.coin_type)
        },
        click_buy: function () {
            this.init_left('buy', this.use_coin_type)
        },

        init_left: function(type1, coin_type) {
            this.get_amount(coin_type)
            this.type1 = type1
            if (type1 == "sell") {
                this.show_button_title ="卖出"
                this.show_can_total_title = "可卖"
                $("#id_button").css("backgroundColor", "#ff007a");
                $("#id_button").css("border-color", "#ff007a");
                $("#title_sell").addClass("cur");
                $("#title_buy").removeClass("cur");
            } else {
                this.show_button_title =" 买入"
                $("#id_button").css("backgroundColor", "#70a800");
                $("#id_button").css("border-color", "#70a800");
                $("#title_buy").addClass("cur");
                $("#title_sell").removeClass("cur");
                this.show_can_total_title = "可买"
            }

        },

        get_amount: function (coin_type) {
            $.post("/btc/get_amount",
            {coin_type: coin_type},
            (data) => {
                // todo tofixed
                var balance = data['amount']
                this.show_balance = balance
                this.show_coin_type =  coin_type.toUpperCase()
                if (coin_type == this.coin_type)
                {
                    this.show_can_total_amount = this.show_balance
                    this.show_can_total_title = "可卖"
                    this.show_can_total_coin_type = this.up_coin_type
                }
            })
        },

        submit_button: function () {
            //询问框
            this.type1
            if (this.type1 == 'buy')
            {
                var content = '您确定要挂单购买'
                var style = 'border:none; background-color:#fff; color:#333;border-radius:0px'
                layer.open({
                    content: content
                    ,btn: ['购买', '取消']
                    ,style:style
                    ,yes: (index) => {
                        this.submit_buy()
                    }
                });
            }
            if (this.type1 == 'sell')
            {
                var content = '您确定要挂单卖出'
                var style = 'border:none; background-color:#fff; color:#333;border-radius:0px'
                layer.open({
                    content: content
                    ,btn: ['卖出', '取消']
                    ,style:style
                    ,yes: (index) => {
                        this.submit_sell()
                    }
                });

            }
        },

        submit_buy:function () {
            //console.log("submit_buy" )
            var price = this.input_price
            var buy_count = this.input_count
            $.post("/btc/buy", {
                coin_type : this.coin_type,
                use_coin_type : this.use_coin_type,
                price : price,
                count : buy_count,
                //trade_type = this.trade_type,
                trade_type : 'limit',
            }, (data) => {

                var error_msg = {
                    "balance not enough" : "余额不足",
                    "buy amount too small" : "购买金额小于最小交易金额",
                    "msm verify false" : "短信验证码不正确",
                }

                //console.log(data);
                var content = '下单购买成功'
                if (data.result == false) {
                    var msg = data.msg
                    if (error_msg[msg])
                    {
                        msg = error_msg[msg]
                    }
                    //console.log(msg);
                    content = '下单失败,'+ msg
                }

                var style = 'border:none; background-color:#fff; color:#333;border-radius:0px'
                layer.open({
                    type:0,
                    content: content,
                    skin: 'msg',
                    time: 3 ,//2秒后自动关闭
                    style: style,
            });
        })
    },
    submit_sell:function () {
        //console.log("submit_sell" )
        var price = this.input_price
        var sell_count = this.input_count
        $.post("/btc/sell", {
            coin_type : this.coin_type,
            use_coin_type : this.use_coin_type,
            price : price,
            count : sell_count,
            //trade_type = this.trade_type,
            trade_type : 'limit',
        }, (data) => {

            var error_msg = {
                "balance not enough" : "余额不足",
                "sell too min" : "卖出数量小于最小交易数量",
                "msm verify false" : "短信验证码不正确",
            }

            //console.log(data);
            var content = '下单成功'
            if (data.result == false) {
                var msg = data.msg
                if (error_msg[msg])
                {
                    msg = error_msg[msg]
                }
                //console.log(msg);
                content = '下单失败,'+ msg
            }

            var style = 'border:none; background-color:#fff; color:#333;border-radius:0px'
            layer.open({
                type:0,
                content: content,
                skin: '3sg',
                time: 3 ,//3秒后自动关闭
                style: style,
                });
            })
        },

        change_price:function (price) {
            if (this.type1 == 'buy') {
                this.input_price=price;
                var total = this.show_balance / price
                total = floor_number(total, 8)

                // todo buy amount
                this.show_can_total_amount = total
                this.show_can_total_title = "可买"
                this.show_can_total_coin_type = this.up_coin_type
            }

            if (this.type1 == 'sell') {

                this.input_price = price;
                this.show_can_total_amount = this.show_balance
                this.show_can_total_title = "可卖"
                this.show_can_total_coin_type = this.up_coin_type
            }

            //console.log("change price" , price)
        },

        change_count:function (percent) {
            var price = this.input_price;

            this.percent_color = ""
            this.percent_color2 = ""
            this.percent_color3 = ""
            this.percent_color4 = ""

            if (percent == 0.25)
            this.percent_color = "orange"
            if (percent == 0.50)
            this.percent_color2 = "orange"
            if (percent == 0.75)
            this.percent_color3 = "orange"
            if (percent == 1)
            this.percent_color4 = "orange"

            if (price <= 0) {
                return
            }
            if (this.type1 == 'buy')
            {
                var balance = this.show_balance
                var input_count= balance * percent / price;
                input_count = floor_number(input_count, 8)
                this.input_count= input_count
            }
            else
            {
                var balance = this.show_balance
                var input_count= balance * percent
                input_count = floor_number(input_count, 8)
                this.input_count= input_count
            }
        },

        get_all_order_type :function (coin_type, use_coin_type, order_type) {
            $.post("/btc/get_all_order", {
                coin_type: coin_type,
                use_coin_type : use_coin_type,
                order_type : order_type
                },
                (jsonobj) =>
            {
                    jsonobj = this.merge_depths(jsonobj, 1)
                    var tofixed_price = coin_tofixed(this.coin_type, this.use_coin_type, coin_tofixed_type_price)
                    var tofixed_count = coin_tofixed(this.coin_type, this.use_coin_type, coin_tofixed_type_count)
                    var tofixed_depth_amount = coin_tofixed(this.coin_type, this.use_coin_type, coin_tofixed_type_depth_amount)
                    var len = jsonobj.length
                    console.log(jsonobj)
                    if (len >= 10)
                    {
                        len = 10
                    }
                    if (len == 0)
                    {
                        return
                    }

                    var max = jsonobj[len-1].depth
                    var temp_list = []
                    for(var i = 0 ;i < len; i ++ )
                    {
                        var price = jsonobj[i].price;
                        var count = jsonobj[i].count;
                        var depth = jsonobj[i].depth;
                        price = price.toFixed(tofixed_price)
                        count = count.toFixed(tofixed_count)
                        depth =depth.toFixed(tofixed_depth_amount)
                        var d = depth * 100 / max
                        var bg_length = 200*d
                        //
                        temp_list.push({
                            price : price,
                            count : count,
                            bg_length : "width:" + bg_length + "px;", bg_length
                        })
                    }

                    if (order_type == 'sell')
                    {
                        temp_list.reverse()
                        trade_data.depth_sell = temp_list

                    } else {
                        trade_data.depth_buy = temp_list
                    }
            }); //end of post
        },
        merge_depths : function(jsonobj, deep) {
            var arr =new Array()
            var last_price = 0
            var last_count = 0
            var last_cnt = 0
            var cnt  = 0
            for(var i = 0 ;i < jsonobj.length; i ++ )
            {
                var price = jsonobj[i].price;
                var count = jsonobj[i].count;
                cnt += count
                if (price == last_price)
                {
                    last_count += count
                    continue
                }
                else
                {
                    if (last_price != 0)
                    {
                        var obj = new Object()
                        obj.price = last_price
                        obj.count = last_count
                        obj.depth = last_cnt
                        arr.push(obj)
                    }
                    last_price = price
                    last_count = count
                    last_cnt = cnt
                }
            }
            if (last_price != 0)
            {
                obj = new Object()
                obj.price = last_price
                obj.count = last_count
                obj.depth = last_cnt
                arr.push(obj)
            }
            return arr
        }
    }, // endof funct

//props['depth_sell', 'depth_buy']
};
</script>
